//question-circle
import { AxFroalaEditorView } from '@/components/AxForm/AxFormItem/AxFroalaEditor';
import { axhttp } from '@/shared/axhttp';
import { axurl } from '@/shared/axurl';
import { Icon, Popover, Spin } from 'antd';
import React, { useState } from 'react';
import { AxQuestionProps } from './data';
import './style.css';

const { getX } = axhttp;
const noDoc = <span className='ax-question-no-doc'>暂无说明文档</span>;
export const AxQuestion: React.FC<AxQuestionProps> = props => {
    const { label, menuId = 0 } = props;
    const [content, setContent] = useState<any>(<Spin className='ax-question-no-doc' />);

    const handleLoadDoc = () => {
        getX(axurl.user.help.readDetailShow, { menuId }).then((res: any) => {
            if (res && res.data && res.data.content && res.data.content !== '') {
                setContent(
                    <div className="ax-question">
                        <AxFroalaEditorView model={res.data.content} />
                    </div>
                );
            }
            else {
                setContent(noDoc);
                // setData(`<p style='margin:0cm;margin-bottom:.0001pt;text-align:justify;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.15pt;line-height:26.0pt;background:white;'><strong><span style="font-size:21px;font-family:仿宋;color:black;background:white;">4.</span></strong><strong><span style="font-size:21px;font-family:仿宋;color:black;background:white;">查询</span></strong></p><p style='margin:0cm;margin-bottom:.0001pt;text-align:justify;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.0pt;line-height:26.0pt;background:white;'><span style="font-size:21px;font-family:仿宋;color:black;background:white;">页面右上角搜索功能可通过校区信息或楼栋名称进行查询，也可以进行模糊查询。</span></p><p style='margin:0cm;margin-bottom:.0001pt;text-align:center;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.0pt;background:white;'><span style="color:black;background:white;"><img src="https://u.smgxh.com/UploadFile/temp/202010/20102318003176200030.png" style="width: 300px;" class="fr-fic fr-dib"></span><span style="font-family:仿宋;color:black;background:white;">&nbsp;</span></p><p style='margin:0cm;margin-bottom:.0001pt;text-align:left;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.15pt;line-height:26.0pt;background:white;'><strong><span style="font-size:21px;font-family:仿宋;color:black;background:white;">（二）房间信息</span></strong></p><p style='margin:0cm;margin-bottom:.0001pt;text-align:justify;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.0pt;line-height:26.0pt;background:white;'><span style="font-size:21px;font-family:仿宋;color:black;background:white;">房间信息包括宿舍概览、房间信息、学生宿舍和非学生宿舍四个页面。主要展示目前宿舍分配情况及所住人员信息，并可以进行学生、教职工及其他人员住宿信息的分配和维护。</span></p><p style='margin:0cm;margin-bottom:.0001pt;text-align:justify;font-size:14px;font-family:"Calibri","sans-serif";text-indent:32.15pt;line-height:26.0pt;background:white;'><strong><span style="font-size:21px;font-family:仿宋;color:black;background:aqua;">宿舍概览</span></strong></p><p><span style="font-size:21px;font-family:仿宋;color:black;background:aqua;">宿舍概览主要展示目前已分配及未分配宿舍情况。</span></p>`);
            }
        });
    }

    return (
        <>
            {label}&nbsp;
            <span onMouseEnter={handleLoadDoc}>
                <Popover overlayClassName='ax-question-div' content={content} trigger="click" placement="rightTop">
                    <Icon type="question-circle" theme="twoTone" twoToneColor="#52c41a" />
                </Popover>
            </span>
        </>
    );
}